﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>个人设置</title>
    <link href="../css/base.css" rel="stylesheet"/>
    <link href="../css/UserCenter.css" rel="stylesheet"/>
    <!--字体图标-->
    <link href="../font/iconfont.css" rel="stylesheet"/>
    <link href="../css/bootstarp.units.css" rel="stylesheet"/>
    <link href="../css/PersonalSettings.css" rel="stylesheet"/>
</head>
<body>
<div class="top">
    <div class="top_right">
        <ul>
            <li class="mm">
                <a href="javascript://"><b>机构平台</b></a><em></em>
            </li>
            <li class="ms">
                <a href="javascript://"><i class="icon iconfont">&#xe600;</i><b>导航</b></a>
                <div class="xialaBox">
                    <div class="fleft xl">
                        <h5>文化分类</h5>
                        <div class="nav-list">
                            <p><a href="javascript://">亲子活动</a></p>
                            <p><a href="javascript://">公益活动</a></p>
                            <p><a href="javascript://">展览展会</a></p>
                            <p><a href="javascript://">名家讲坛</a></p>
                            <p><a href="javascript://">技术研讨</a></p>
                            <p><a href="javascript://">全名可普</a></p>
                        </div>
                    </div>
                    <div class="fleft xr">
                        <h6><a href="javascript://">活动讲座</a></h6>
                        <h6><a href="javascript://">文化资源</a></h6>
                        <h6><a href="javascript://">场馆预约</a></h6>
                        <h6><a href="javascript://">机构广场</a></h6>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="top_left">欢迎你，小芝麻<a href="javascript://">退出</a></div>
</div>
<div class="head_mid">
    <div class="head_main">
        <div class="logo">
            用户中心<a href="javascript://">返回平台首页</a>
        </div>
        <ul>
            <li><a href="UserCenter.html">首页</a></li>
            <li><a href="PersonalSettings.html">个人设置</a></li>
            <li><a href="javascript://">消息</a></li>
            <li><a href="javascript://">学习社区</a></li>
        </ul>
        <div class="search">
            <!--输入时候改变字体颜色给input加“fontColor”-->
            <input type="text" value="输入检索词"/>
            <i class="icon iconfont">&#xe603;</i>
        </div>
        <div class="fclear"></div>
    </div>
</div>
<div class="content">
    <div class="left">
        <div class="user">
            <h1><img src="../images/user.gif"/></h1>
            <div>
                <h2>小芝麻小芝麻小芝麻</h2>
                <p>ID：23986</p>
                <p>积分：12</p>
            </div>
        </div>
        <ul class="sideNav">
            <li class="e">个人中心</li>
            <li>我的报名</li>
            <li>我的关注</li>
            <li>我的评论</li>
            <li>我的收藏</li>
            <li>我的积分</li>
            <li>我的申请</li>
            <li>我的机构</li>
            <li>我的筹办</li>
        </ul>
    </div>
    <div class="right">
        <div class="personSetting">
            <h1 class="title">基本信息</h1>
            <div class="bm_swtich_all">
                <ul class="bm_swtich">
                    <li class="e">基本信息</li>
                    <li>头像照片</li>
                    <li>安全</li>
                </ul>
                <i class="bm_swtich_line"></i>
            </div>
            <div class="setting" style="display:block">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label"><i>*</i>用户名：</label>
                        <div class="controls">
                            <input type="text" class="form-control col-md-3" placeholder="请输入"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label"><i>*</i>昵称：</label>
                        <div class="controls">
                            <input type="text" class="form-control col-md-3" placeholder="请输入"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label"><i>*</i>性别：</label>
                        <div class="controls form-control-static">
                            <label class="radio-inline"> <input type="radio" value="option1"/>男</label>
                            <label class="radio-inline"> <input type="radio" value="option1"/>女</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">生日：</label>
                        <div class="controls OK">
                            <select class="form-control col-md-2" id="year">
                                <option>请选择</option>
                                <option>1990</option>
                                <option>1991</option>
                                <option>1992</option>
                                <option>1993</option>
                                <option>1994</option>
                                <option>1994</option>
                                <option>1996</option>
                                <option>1997</option>
                                <option>1998</option>
                                <option>1999</option>
                                <option>2000</option>
                                <option>2001</option>
                                <option>2002</option>
                                <option>2003</option>
                            </select>
                            <span class="fleft" style="margin-left:5px;">年</span>
                            <select class="form-control col-md-2" id="month">
                                <option>请选择</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                            </select>
                            <span class="fleft" style="margin-left:5px;">月</span>
                            <select class="form-control col-md-2" id="day">
                                <option>请选择</option>
                                <option>01</option>
                                <option>02</option>
                                <option>03</option>
                                <option>04</option>
                                <option>05</option>
                                <option>06</option>
                                <option>07</option>
                                <option>08</option>
                                <option>09</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                            </select>
                            <span class="fleft" style="margin-left:5px;">日</span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="control-label">兴趣：</label>
                        <div class="controls">
                            <span>请选择您感兴趣的分类，给您最精准的推荐</span>
                            <ul class="hobul">
                                <li value="1" name="hobbyType" class="">亲子活动<s></s></li>
                                <li value="2" name="hobbyType">公益活动<s></s></li>
                                <li value="3" name="hobbyType">展览展会<s></s></li>
                                <li value="4" name="hobbyType">名家讲坛<s></s></li>
                                <li value="3" name="hobbyType">技术研讨<s></s></li>
                                <li value="4" name="hobbyType">全名科普<s></s></li>
                            </ul>
                        </div>
                    </div>
                    <div class="form-group" style="margin:30px 0 50px 100px;">
                        <button class="btn orange" type="button">提交</button>
                    </div>
                    <h1 class="title">认证信息</h1>
                    <div class="authentication">
                        <ul>
                            <li><i class="icon iconfont">&#xe612;</i>手机未绑定</li>
                            <li><i class="icon iconfont">&#xe604;</i>邮箱未绑定</li>
                            <li class="current"><i class="icon iconfont">&#xe611;</i>已实名认证</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="setting" style="display:none">
                <div class="uploadArea">
                    <div class="form-group">
                        <button class="btn" type="button">选择您要上传的头像</button>
                    </div>
                    <p class="up-text">仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M</p>
                    <div class="upload_img">
                    </div>
                    <hr class="hrs"/>
                    <h6>效果预览</h6>
                    <p class="h6-text">你上传的图片会自动生成2种尺寸，请注意小尺寸的头像是否清晰</p>
                    <div class="sizeArea">
                        <div class="size100"><p></p>100*100像素</div>
                        <div class="size50"><p></p>50*50像素</div>
                    </div>

                    <div class="form-group" style="margin:30px 0 50px 0px;">
                        <button class="btn orange" type="button">保存</button>
                    </div>
                </div>
            </div>
            <div class="setting" style="display:none">
                <div class="bindList" style="display:block">
                    <!--1.默认绑定样式:.well-default
                        2.绑定危险样式:.well-danger
                        3.绑定警告样式:.well-warning
                        4.绑定成功样式:.well-success
                        -->
                    <div class="bindArea  well-warning">
                        <h1>手机绑定：<b>未绑定</b></h1>
                        <div class="bindbox">
                            <p>找回密码、账号安全认证的最重要途径。</p>
                            <a href="javascript://" class="Bindtext">立即绑定</a>
                        </div>
                    </div>
                    <div class="bindArea well-success">
                        <h1>绑定身份证：<b>您已绑定身份证</b></h1>
                        <div class="bindbox">
                            <p>已绑定身份证：371***************</p>
                            <p>这是我们联系您的重要途径</p>
                            <!--<p>只有实名认证用户才能进行场地文化资源的预约。</p>-->
                            <a href="javascript://" class="Bindtext">立即绑定</a>
                        </div>
                    </div>
                    <div class="bindArea  well-warning">
                        <h1>绑定邮箱：<b>未绑定</b></h1>
                        <div class="bindbox">
                            <p>忘记密码时，您可以通过绑定的邮箱找回密码。</p>
                            <a href="javascript://" class="Bindtext">立即绑定</a>
                        </div>
                    </div>
                    <div class="bindArea  well-warning">
                        <h1>修改密码：</h1>
                        <div class="bindbox">
                            <p>密码强度：中。</p>
                            <a href="javascript://" class="Bindtext">修改密码</a>
                        </div>
                    </div>
                </div>
                <div class="bind_content" style="display:none;">
                    <!--1.默认绑定样式:.well-default
                        2.绑定危险样式:.well-danger
                        3.绑定警告样式:.well-warning
                        4.绑定成功样式:.well-success
                        -->
                    <div class="form-horizontal" style="display:none;">
                        <div class="form-group">
                            <label class="control-label">手机号：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">登录密码：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">验证码：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                                <span class="yanzheng"><a href="javascript://">获取验证码</a></span>
                            </div>
                        </div>
                        <div class="bindArea  well-default">
                            <div class="bindbox" style="width:390px; margin-left:50px;">
                                <p>短信验证码正发送至您的手机，请收到验证码后30分钟内填写。</p>
                                <div class="form-group" style="margin:10px 0 0 40px;">
                                    <button class="btn blue" type="button">57秒后可重发短信</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-left:100px;">
                            <button class="btn orange" type="button" style="margin-right:10px;">绑定手机</button>
                            <button class="btn bindCancel" type="button">取消</button>
                        </div>
                    </div>
                    <div class="form-horizontal" style="display:none;">
                        <div class="form-group">
                            <label class="control-label"> 姓名：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">身份证：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">身份证照片：</label>
                            <div class="controls">
                                <div class="fleft">
                                    <div class="idImg">
                                        <img src="../images/photo-img2.jpg" />
                                    </div>
                                    <button class="btn blue" type="button"style="margin:20px 0 20px 0;">上传照片</button>
                                </div>
                                <div class="shili fleft">
                                    <div class="shiliImg fleft">
                                         <img src="../images/photo-img4.png" />
                                    </div>
                                    <div class="clear"></div>
                                    <p>要求：<span>1、身份证正面（信息面）</span><br>
                                        <span style="margin-left: 43px;">2、证件全部信息清晰无遮拦</span></p>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-left:100px;">
                            <button class="btn orange" type="button" style="margin-right:10px;">绑定身份</button>
                            <button class="btn bindCancel" type="button">取消</button>
                        </div>
                    </div>
                    <div class="form-horizontal" style="display:none;">
                        <div class="form-group">
                            <label class="control-label"> 邮箱：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">登录密码：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group" style="margin-left:100px;">
                            <button class="btn orange" type="button" style="margin-right:10px;">绑定邮箱</button>
                            <button class="btn bindCancel" type="button">取消</button>
                        </div>
                    </div>
                    <div class="form-horizontal" style="display:none">
                        <div class="form-group">
                            <label class="control-label">原始密码：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">新密码：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">重复密码：</label>
                            <div class="controls">
                                <input type="text" class="form-control col-md-4" placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="form-group" style="margin-left:100px;">
                            <button class="btn orange" type="button" style="margin-right:10px;">修改密码</button>
                            <button class="btn bindCancel" type="button">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--js引用-->
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/animate.js"></script>

<script src="../js/personalSettings.js"></script>
<script>
    $(function () {
        personSetting();
        //我的报名处选项卡切换
        $(".bm_swtich_all").each(function () {
            var ths = $(this);
            var tli = ths.find("li");
            var tle = ths.find(".bm_swtich_line");
            var tli_width = $(".bm_swtich li:first").width();
            tle.width(tli_width);
            tli.click(function () {
                var indexs = $(this).index();
                $(".setting").eq(indexs).show().siblings(".setting").hide();
                var tw = $(this).width();
                tli.removeClass("e");
                $(this).addClass("e");
                tle.stop(true, true).animate({
                    width: tw,
                    left: $(this).position().left
                })
            })
        })
        $(".hobul li").click(function () {
            var indexs = $(this);
            if (!$(this).hasClass("selected")) {
                $(indexs).addClass("selected");
            }
            else {
                $(indexs).removeClass("selected");
            }
        })
    })
    shink();

    function Bindtext() {
        //立即绑定
        $(".Bindtext").click(function () {
            $(".bindList").hide();
            $(".bind_content").show();
            var mm = $(".Bindtext").index($(this));
            $(".bind_content").find(".form-horizontal").eq(mm).show().siblings(".form-horizontal").hide();
        })
        //绑定取消
        $(".bindCancel").click(function () {
            $(".bindList").show();
            $(".bind_content").hide();
        })
        $(".bm_swtich li").eq(2).click(function () {
            $(".bindList").show();
            $(".bind_content").hide();
        })
    }
    Bindtext();
</script>
</body>
</html>
